<template>
  <transition name="bounce">
    <section class="mui-content pd dy-box">
      <mh-header headName="我的动态"> </mh-header>
      <div class="dy-item" v-for="item in dynamics">
        <div class="dy-top flex">
          <div class="dy-u-pic">
            <img :src="item.pic || 'https://img.gsdlcn.com/uploads/allimg/121109/1-121109214308.jpg'" alt="头像">
          </div>
          <div>
            <p class="dy-u-name" v-text="item.nickname">用户***</p>
            <p class="dy-u-info">{{item.age}}岁 | {{item.height}} | {{item.education}} | {{item.income}}</p>
          </div>
          <span class="ico-remove">-</span>
        </div>

        <div class="dy-middle">
          <p class="dy-u-cont mh-mg-tb" v-text="item.content">--</p>
          <div class="dy-img-list flex" v-if="item.images.length">
            <div v-for="picItem in item.images" class="pic-box" :class="{only: item.images.length === 1}">
              <img :src="picItem" alt="配图">
            </div>
          </div>
          <p class="dy-time" v-text="item.time">9小时前</p>
        </div>

        <div class="dy-foot mui-text-right">
          <a href="javascript:">
            <img src="../../assets/images/ico/ic_t_gift.png" alt="图标">
            <span>3</span>
          </a>
          <a href="javascript:">
            <img src="../../assets/images/ico/ic_e_share.png" alt="图标">
            <span>1</span>
          </a>
        </div>
      </div>

      <div class="release-dy" @tap="releaseDynamic">+</div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import {MH_API} from "@/api/api";
  export default {
    name: "my-dynamic",
    data () {
      return {
        dynamics: [
          // {
          //   id: '1',
          //   name: '吉安',
          //   age: 23,
          //   height: 187,
          //   education: '本科',
          //   income: '4000-5000',
          //   content: '啊建行卡号个股的客户佳斯哦i如图',
          //   time: '9小时前',
          //   pic: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3396400642,3980900114&fm=11&gp=0.jpg',
          //   images: [
          //     'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3396400642,3980900114&fm=11&gp=0.jpg',
          //     'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1925093698,3746283339&fm=11&gp=0.jpg',
          //     'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4091694486,3911007811&fm=11&gp=0.jpg'
          //   ]
          // }
        ]
      }
    },
    methods: {
      getData(){
        let self = this;
        let params = {
          page: 1,
          limit: 10
        };
        MH_API.twitterList(params).then(res => {
          if (res.status === 200) {
            self.dynamics = res.data;
          }
        })
      },
      releaseDynamic () {
        this.$router.push({
          path: '/explore/release'
        })
      }
    },
    components: {
      MhHeader
    },
    created(){
      this.getData();
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .sub-control {border-bottom: 1px solid #eee;}
  .dy-top {
    position: relative;
    .ico-remove {
      position: absolute;
      display: inline-block;
      width: 1.5rem;
      height: 1.5rem;
      line-height: 1.5rem;
      background-color: #fc5624;
      text-align: center;
      border-radius: 100%;
      @include sc(2rem, #fff);
      right: 0;
      top: 0;
    }
  }
  .dy-u-pic {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: .5rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }
  .dy-u-name {@include sc(1.5rem, #333);}
  .dy-u-info {@include sc(1.2rem, #999);}
  .dy-u-cont {@include sc(1.3rem, #666);}
  .dy-time {@include sc(1rem, #999);}
  .dy-item {
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #fff;
  }
  .pic-box {
    width: 11.1rem;
    height: 11.2rem;
    margin: .2rem;
    overflow: hidden;
    &.only {
      img {max-height: 11.2rem;}
    }
    img {width: 100%;}
  }
  .dy-foot {
    a {
      margin-left: 1.5rem;
      @include sc(1rem, #999);
    }
    img {width: 1.2rem;}
  }
  .release-dy {
    position: fixed;
    width: 3.35rem;
    height: 3.35rem;
    line-height: 3.35rem;
    text-align: center;
    border-radius: 100%;
    @include sc(2rem, #fff);
    right: 1rem;
    bottom: 5.5rem;
    background: linear-gradient(144deg, #dd65a1 0%, #fa625a 100%);
    box-shadow: 0 0 .1rem rgba(222,101,158, .6);
  }
</style>
